<template>
    <div>
        <el-popover
            v-model="visible"
            v-bind="$attrs"
            :width=" width >= 300 ? width : 300"
            v-on="$listeners"
>
            <div class="content_wrapper">
                <p class="title">{{ contentTitle }}</p>
                <p class="content">{{ content }}</p>
            </div>
            <div class="btn">
                <BaseButton size="mini" type="second" @click="handleCancle">取消</BaseButton>
                <BaseButton size="mini" type="primary" @click="handleComfirm">确定</BaseButton>
            </div>
            <el-button slot="reference">删除</el-button>
        </el-popover>
    </div>
</template>
<script>

export default {
    name: 'BasePopover',
    props: {
        width: {
            type: Number,
            required: false,
            default: 300
        },
        contentTitle: {
            type: String,
            default: '标题',
        },
        content: {
            type: String,
            default: '这是内容这是内容这是内容',
        },
    },
    data() {
        return {
            visible: false,
        }
    },
    methods: {
        handleComfirm() {
            this.visible = false
            this.$emit('handleComfirm', this.visible)
        },
        handleCancle() {
            this.visible = false
            this.$emit('handleCancle', this.visible)
        },
    },

}
</script>
<style lang="scss" scoped>
.btn {
    text-align: right;
    margin: 0;

    &:nth-last-child {
        margin-left: 8px;
    }
}

.content_wrapper {
    margin-bottom: 24px;
    margin-top: -12px;

    .title {
        font-size: 16px;
        font-weight: bold;
        color: #171725;
    }

    .content {
        font-size: 14px;
        color: #44444f;
        margin-bottom: 8px;
    }
}
</style>
